Update styled_components_files.js to include all files that import styled-components#205011
Merged
tkajtoch merged 17 commits intoelastic:mainfrom Jan 5, 2025
Merged
Conversation
tkajtoch
added
release_note:skip
tkajtoch
force-pushed
the
build/fix-babel-styled-components-files-list
branch
from
6141043 to
8cb350c
Compare
Ikuni17
approved these changes
Dec 19, 2024
Contributor
Ikuni17
left a comment
Ikuni17
left a comment
There was a problem hiding this comment.
Thanks for the PR. I think we will want to run the script against 8.x or possibly backport:prev-minor
tkajtoch
force-pushed
the
build/fix-babel-styled-components-files-list
branch
from
88524a0 to
20ae7f3
Compare
elastic-vault-github-plugin-prod
Bot
requested review from
a team
as code owners
shahzad31
approved these changes
Dec 20, 2024
Contributor
shahzad31
left a comment
shahzad31
left a comment
There was a problem hiding this comment.
LGTM for Synthetics !!
Dosant
approved these changes
Dec 20, 2024
Member
|
I removed @dominiqueclarke from the review requests here because @shahzad31 has looked at it and reported back in detail re: Synthetics. Thanks again, @tkajtoch! |
This was referenced Dec 20, 2024
adcoelho
approved these changes
Dec 23, 2024
PhilippeOberti
approved these changes
Dec 23, 2024
Contributor
PhilippeOberti
left a comment
PhilippeOberti
left a comment
There was a problem hiding this comment.
LGTM and desk tested for the Threat Hunting Investigations team. We will be trying to remove all these styled-components we own soon!
juliaElastic
approved these changes
Dec 24, 2024
clintandrewhall
force-pushed
the
build/fix-babel-styled-components-files-list
branch
from
89c808e to
17649a5
Compare
Contributor
|
Resolved the rebase issues and added a couple of fixes. @elastic/kibana-operations @mistic where is the appropriate place to run this script to ensure it's up-to-date? In |
tkajtoch
force-pushed
the
build/fix-babel-styled-components-files-list
branch
from
8b14214 to
8baaa61
Compare
Contributor
|
LGTM, alerting exp |
fkanout
approved these changes
Dec 26, 2024
tkajtoch
force-pushed
the
build/fix-babel-styled-components-files-list
branch
from
8cb5691 to
7fdf77d
Compare
Contributor
💚 Build SucceededMetrics [docs]Module Count
Async chunks
Page load bundle
Unknown metric groupsasync chunk count
ESLint disabled in files
ESLint disabled line counts
Total ESLint disabled count
History
cc @tkajtoch |
PhilippeOberti
added a commit
that referenced
this pull request
Jan 8, 2025
…otion/css vs emotion/react (#205664) ## Summary This recent [PR](#205011) slightly broke the UI in a couple of small places in the alert details flyout. Strangely, I did review the PR by pulling down the branch, but only looked at the places that were impacted by the files modified. The couple of places where the UI broke were completely different... My guess it is is related to the fact that in those place we were still using `@emotion/css` and this might not play nice with some `styled_components`... Updating those places to use `@emotion/react` fixed the issues! | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | In a follow work, we need to remove completely all the `styled_components` we have.
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jan 8, 2025
…otion/css vs emotion/react (elastic#205664) ## Summary This recent [PR](elastic#205011) slightly broke the UI in a couple of small places in the alert details flyout. Strangely, I did review the PR by pulling down the branch, but only looked at the places that were impacted by the files modified. The couple of places where the UI broke were completely different... My guess it is is related to the fact that in those place we were still using `@emotion/css` and this might not play nice with some `styled_components`... Updating those places to use `@emotion/react` fixed the issues! | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | In a follow work, we need to remove completely all the `styled_components` we have. (cherry picked from commit a8e1bf4)
kibanamachine
added a commit
that referenced
this pull request
Jan 8, 2025
… to emotion/css vs emotion/react (#205664) (#205928) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)](#205664) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"philippe.oberti@elastic.co"},"sourceCommit":{"committedDate":"2025-01-08T16:00:28Z","message":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent [PR](#205011) slightly\r\nbroke the UI in a couple of small places in the alert details flyout.\r\nStrangely, I did review the PR by pulling down the branch, but only\r\nlooked at the places that were impacted by the files modified. The\r\ncouple of places where the UI broke were completely different...\r\nMy guess it is is related to the fact that in those place we were still\r\nusing `@emotion/css` and this might not play nice with some\r\n`styled_components`...\r\n\r\nUpdating those places to use `@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\nIn a follow work, we need to remove completely all the\r\n`styled_components` we have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0"],"title":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react","number":205664,"url":"https://github.com/elastic/kibana/pull/205664","mergeCommit":{"message":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent [PR](#205011) slightly\r\nbroke the UI in a couple of small places in the alert details flyout.\r\nStrangely, I did review the PR by pulling down the branch, but only\r\nlooked at the places that were impacted by the files modified. The\r\ncouple of places where the UI broke were completely different...\r\nMy guess it is is related to the fact that in those place we were still\r\nusing `@emotion/css` and this might not play nice with some\r\n`styled_components`...\r\n\r\nUpdating those places to use `@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\nIn a follow work, we need to remove completely all the\r\n`styled_components` we have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205664","number":205664,"mergeCommit":{"message":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent [PR](#205011) slightly\r\nbroke the UI in a couple of small places in the alert details flyout.\r\nStrangely, I did review the PR by pulling down the branch, but only\r\nlooked at the places that were impacted by the files modified. The\r\ncouple of places where the UI broke were completely different...\r\nMy guess it is is related to the fact that in those place we were still\r\nusing `@emotion/css` and this might not play nice with some\r\n`styled_components`...\r\n\r\nUpdating those places to use `@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\nIn a follow work, we need to remove completely all the\r\n`styled_components` we have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>
tkajtoch
added a commit
to tkajtoch/kibana
that referenced
this pull request
Jan 10, 2025
tkajtoch
added a commit
that referenced
this pull request
Jan 10, 2025
…mport `styled-components` (#206084) ## Summary This is a manual backport of #205011 with regenerated `styled_components_files.js` to match `8.x` code. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
viduni94
pushed a commit
to viduni94/kibana
that referenced
this pull request
Jan 23, 2025
…`styled-components` (elastic#205011)
viduni94
pushed a commit
to viduni94/kibana
that referenced
this pull request
Jan 23, 2025
…otion/css vs emotion/react (elastic#205664) ## Summary This recent [PR](elastic#205011) slightly broke the UI in a couple of small places in the alert details flyout. Strangely, I did review the PR by pulling down the branch, but only looked at the places that were impacted by the files modified. The couple of places where the UI broke were completely different... My guess it is is related to the fact that in those place we were still using `@emotion/css` and this might not play nice with some `styled_components`... Updating those places to use `@emotion/react` fixed the issues! | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | In a follow work, we need to remove completely all the `styled_components` we have.
35 tasks
38 tasks
11 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
14 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR updates the list of component files still using
styled-componentsto match all files that import fromstyled-componentspackage. This fixes the recent issue with some styled-components styles not loading properly in Kibana.The previously used regex list became error-prone and is more complicated to follow and update when converting plugins to Emotion in steps. The added generator traverses kibana sources and looks up files that import
styled-componentsto build an array of path regexes to put inpackages/kbn-babel-preset/styled_components_files.js.This code is an initial implementation to fix style errors on
mainand get us unblocked. It's missing tests and has not-so-optimal structure, however, the latter doesn't matter that much at the moment considering it's going to be run occasionally andstyled-componentsis going away.Local testing
Please run
node scripts/build_kibana_platform_plugins --no-cachebefore testing this PR locally. Updates to@kbn/babel-presetdon't update the optimizer cache key.